<!-- Html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜拳游戏</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <table>
        <tr>
            <td id="col1">
                <p>你</p>
                <img src="images/zb.jpg" id="you">
            </td>
            <td id="col2">
                <p id="vs">VS</p>
            </td>
            <td id="col3">
                <p>电脑</p>
                <img src="images/zb.jpg" id="computer">
            </td>
        </tr>
        <tr>
            <td colspan="3">
            <!--通过id改变文本内容-->
                <p id="result">Are you ready?</p>  
            </td>
        </tr>
        <tr>
            <td>
                <p>你选择了：</p>
                <img src="images/zb.jpg" id="current">
            </td>
            <td>
                <p id="choice">Choice</p>
            </td>
            <td>
                <p>请选择出拳：</p>
                    <select id="select" onchange="doChange()">
                        <option value="0">--请选择--</option>
                        <option value="1">石头</option>
                        <option value="2">剪刀</option>
                        <option value="3">布</option>
                    </select>
                    <!--绑定点击事件-->
                    <button onclick="doclick()">确认</button>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <p>
                    总数：<span id="total">0</span>
                    胜利：<span id="win">0</span>
                    失败：<span id="lose">0</span>
                    平局：<span id="draw">0</span>
                </p>
            </td>
        </tr>
    </table>
    <script src="js/index.js"></script>
</body>
</html>